<template>
  <div class="app-container">

    <!-- <el-select v-model="searchTd" placeholder="请选择">
    <el-option
      v-for="item in searchType"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select> -->
    <!-- <el-input v-model="searchInput" style="width:150px" placeholder="请输入内容"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
    <el-button type="primary"   @click="chongzhi">重置</el-button> -->
    <div style="height:650px;overflow: auto;">
      <el-table :data="rolesList" v-loading='loading' style="width: 100%;margin-top:30px;" border>
        <el-table-column width="80" label="店铺ID">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            {{ scope.row.gameName }}
          </template>
        </el-table-column>
        <el-table-column label="特色">
          <template slot-scope="scope">
            {{ scope.row.featuresname}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="是否有安卓">
          <template slot-scope="scope">
            {{ scope.row.haveAndroid?"是":"否"}}
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="是否有IOS">
          <template slot-scope="scope">
            {{ scope.row.haveIos?"是":"否"}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="简介">
          <template slot-scope="scope">
            {{ scope.row.simpleText}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开服时间">
          <template slot-scope="scope">
            {{ scope.row.openAreaTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="排名">
          <template slot-scope="scope">
            {{ scope.row.ranking}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status==1?'测试':'已开服'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总人气">
          <template slot-scope="scope">
            {{ scope.row.totalPopularity}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="版本id">
          <template slot-scope="scope">
            {{ scope.row.versionId}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="版本类别">
          <template slot-scope="scope">
            {{ scope.row.versionname}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="380">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
            <el-popconfirm title="是否删除" @confirm='handleDelete(scope.row)'>
              <el-button slot="reference" type="danger">删除</el-button>
            </el-popconfirm>
            <el-button type="primary" size="mini" @click="boxgametop(scope.row)">轮播图</el-button>
            <el-button type="primary" size="mini" @click="boxgamePropUp(scope.row)">道具上传</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <el-pagination background layout="prev, pager, next,sizes,total" :total='total' @current-change='current_change' @size-change='size_change' style="text-align: center; margin-top: 60px;" :page-sizes="[10, 50, 100, 1000]">
    </el-pagination>

  </div>
</template>

<script>
import api from '@/api/gameBox'
import { getToken } from '@/utils/auth'
export default {
  name: 'gameList',

  data() {
    return {
      rolesList: [],
      total: 0,
      limit: 10, // 默认10条
      page: 1, // 当前页码
      loading: false
    }
  },
  created() {},
  computed: {
    headers() {
      return {
        'X-Hyxxkj-Admin-Token': getToken()
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleDelete(e) {
      api.Delete(e).then((res) => {
        if (res.data.errno == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      })
    },
    current_change(e) {
      this.page = e
      this.getList()
    },
    size_change(e) {
      this.limit = e
      this.getList()
    },
    chongzhi() {
      this.getList()
    },
    getList() {
      this.loading = true
      api
        .list({
          limit: this.limit,
          page: this.page
        })
        .then((res) => {
          if (res.data.errno == 0) {
            this.rolesList = res.data.data.list
            this.total = res.data.data.total
            this.limit = res.data.data.limit
            this.page = res.data.data.page
            this.loading = false
          }
        })
        .catch(() => {
          this.Loading = false
        })
    }
  }
}
</script>
